<template>
  <div class="chart">
    <div ref="chart" style="width:100%;height:376px"></div>
    <div class="x-two">
      <h3>
        <span class="circle"></span>
        套餐费约{{this.price.Decoration_sum}}万
      </h3>
      <van-row>
        <van-col span="6">
          <p>套餐费<span>=</span></p>
          <p>{{this.price.Decoration_sum}}<span>万</span></p>
        </van-col>
        <van-col span="6">
          <p>基础费<span>+</span></p>
          <p>{{this.price.Decoration_basis}}<span>万</span></p>
        </van-col>
        <van-col span="6">
          <p>拆改水电<span>+</span></p>
          <p>{{this.price.Decoration_water*1+this.price.Decoration_dismantle*1}}<span>万</span></p>
        </van-col>
        <van-col span="6">
          <p>税费</p>
          <p>{{this.price.Decoration_tax}}<span>万</span></p>
        </van-col>
      </van-row>
      <table class="table">
        <tbody>
        <tr>
          <th>费用项</th>
          <th>价格 (元/㎡)</th>
          <th>总价 (万)</th>
        </tr>
        <tr>
          <td>套餐基础费
            <van-icon name="question" @click="prompt_one"/>
          </td>
          <td colspan="0">1199</td>
          <td class="total-td">{{this.price.Decoration_basis}}
            <van-icon name="question" @click="prompt" v-if="this.price.area<=60"/>
          </td>
        </tr>
        <tr>
          <td>老房拆改费</td>
          <td colspan="0">150</td>
          <td class="total-td">{{this.price.Decoration_water}}
            <van-icon name="question" @click="prompt" v-if="this.price.area<=60"/>
          </td>
        </tr>
        <tr>
          <td>老房改水电</td>
          <td colspan="0">150</td>
          <td class="total-td">{{this.price.Decoration_dismantle}}
            <van-icon name="question" @click="prompt" v-if="this.price.area<=60"/>
          </td>
        </tr>
        <tr>
          <td>税费</td>
          <td colspan="0">按照3.41%收取</td>
          <td class="total-td">{{this.price.Decoration_tax}}</td>
        </tr>
        <tr>
          <td>个性化项目
            <van-icon name="question" @click="prompt_two"/>
          </td>
          <td colspan="2">需根据实际量房情况决定</td>
        </tr>
        <tr>
          <td>管理费</td>
          <td colspan="2">无管理费</td>
        </tr>
        <tr>
          <td>服务费</td>
          <td colspan="2">无服务费</td>
        </tr>
        </tbody>
      </table>
      <h3>
        <span class="circle"></span>
        业主其他自购费约{{this.price.dataFurniture_sum}}万
        <van-icon name="question" @click="prompt_three" color="#999"/>
      </h3>
      <van-row>
        <van-col span="6">
          <p>业主自选<span>=</span></p>
          <p>{{this.price.dataFurniture_sum}}<span>万</span></p>
        </van-col>
        <van-col span="6">
          <p>家具<span>+</span></p>
          <p>{{this.price.dataFurniture_custom+this.price.dataFurniture_other}}<span>万</span></p>
        </van-col>
        <van-col span="6">
          <p>家电<span>+</span></p>
          <p>{{this.price.dataFurniture_device}}<span>万</span></p>
        </van-col>
        <van-col span="6">
          <p>软装</p>
          <p>{{this.price.dataFurniture_adornment}}<span>万</span></p>
        </van-col>
      </van-row>
      <table class="table">
        <tbody>
        <tr>
          <th>费用项</th>
          <th>项目包含</th>
          <th>平均花费 (万)</th>
        </tr>
        <tr>
          <td>定制家具</td>
          <td colspan="0">衣柜/电视柜/餐边柜等</td>
          <td class="total-td">{{this.price.dataFurniture_custom}}</td>
        </tr>
        <tr>
          <td>其他家具</td>
          <td colspan="0">床/床垫/沙发/桌椅</td>
          <td class="total-td">{{this.price.dataFurniture_other}}</td>
        </tr>
        <tr>
          <td>家电</td>
          <td colspan="0">冰箱/洗衣机/电视等</td>
          <td class="total-td">{{this.price.dataFurniture_device}}</td>
        </tr>
        <tr>
          <td>软装</td>
          <td colspan="0">窗帘/灯具/摆件</td>
          <td class="total-td">{{this.price.dataFurniture_adornment}}</td>
        </tr>
        </tbody>
      </table>
      <div class="chartWarn">
        <van-icon name="warning" />
        <p>此价格根据市场均价计算，购买不同品牌的家具/家电/软装项目，价格也会不同</p>
      </div>
    </div>
    <van-button type="info" block class="chartButton" @click="sign" v-if="price.sign==0 && price.payment==0">签约</van-button>
    <van-button type="info" block class="chartButton" @click="pay" v-if="price.sign==1 && price.payment==0">付款</van-button>
    <van-button type="info" block class="chartButton" @click="comment"  v-if="price.sign==1 && price.payment==1" >评论</van-button>
  </div>
</template>

<script>

import {mapState} from "vuex"
import {post} from "../assets/js/config/api";
import {Dialog} from "vant";
import {order} from "../assets/js/config/common";

export default {
  computed:mapState(['uid']),
  name: "PriceList",

  data(){
    return{
      price: {},
      id:this.$route.params.id,
      params:{},
    }
  },
  mounted() {
    this.params.user=this.uid;
    this.params.id=this.id;
    post('/list',this.params).then(result=>{
      console.log(result);
      this.price=result.result[0];
      this.getEchartData();
    })

  },
  methods: {
    getEchartData() {
      console.log(`我是${this.price}`)
      const chart = this.$refs.chart
      const myChart = this.$echarts.init(chart)
      const option = {
        title: {
          text: '总费用',
          subtext: `${this.price.sum}万`,
          left: 'center',
          subtextStyle:{
            fontWeight:'bold',
            fontSize:30,
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '费用',
            type: 'pie',
            radius: '50%',
            data: [
              {value: this.price.Decoration_sum, name: '预计被窝套餐费'},
              {value: this.price.dataFurniture_sum, name: '业主自购项'},
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    prompt() {
      this.$dialog.alert({
        message: '不足60㎡按60㎡计算',
        confirmButtonColor: "#5373B2",
      })
    },
    prompt_one() {
      this.$dialog.alert({
        message: '套餐包含基础施工人工费、辅材费、地板、墙漆、橱柜、卫浴设备（不包含窗户、暖气、防盗门、家具、家电）',
        confirmButtonColor: "#5373B2",
      })
    },
    prompt_two(){
      this.$dialog.alert({
        message: '常见个性化项目包含新建墙体、吊顶、橱柜套餐外延米等',
        confirmButtonColor: "#5373B2",
      })
    },
    prompt_three() {
      this.$dialog.alert({
        message: '业主一般还需要自购家具/家电/软装等项目，品牌差异较大。此价格为市场预估价仅供参考',
        confirmButtonColor: "#5373B2",
      })
    },
    pay(){
      Dialog.confirm({
        title: '付款',
        message: '确定要付款吗',
      }).then(() => {
        post('/pay', this.params).then(()=>{
          this.$router.push('/shop/2')
        })
      }).catch(err => {console.log(err)})
    },
    sign(){
      Dialog.confirm({
        title: '签约',
        message: '确定要签约吗',
      }).then(() => {
        post('/sign', this.params).then(() => {
          this.$router.push('/shop/1')
        })
      }).catch((err)=>{console.log(err)})
    },
    comment(){
      this.$router.push(`/comment/${this.id}`)
    }
  },


}
</script>

<style lang="scss">
@import "../../public/sass/chart";
</style>
